<template>
    <div>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="标签名称">
                   <br> <br>
                <el-input v-model="formInline.user" placeholder clearable style="margin-left:-60px;width:200px"></el-input>
                <!-- <div>
                    <el-tree
                        :data="data"
                        show-checkbox
                        default-expand-all
                        node-key="id"
                        ref="tree"
                        highlight-current
                        :props="defaultProps"
                    ></el-tree>
                </div>-->
            </el-form-item>
            <!-- <el-form-item label="标签名称">
            <div>
    <launch-tree :list='list' :options='options'></launch-tree>
  </div>
            </el-form-item>-->
            <el-form-item  style="margin-left:700px;text-align:right;margin-top:50px">
                <el-button type="primary" @click="search()" size="mini" icon="el-icon-search">查询</el-button>
            <!-- </el-form-item>
            <el-form-item> -->
                <el-button type="primary" @click="kong()" size="mini" icon="el-icon-delete">清空</el-button>
            <!-- </el-form-item>
            <el-form-item> -->
                <el-button type="primary" @click="add()" size="mini" icon="el-icon-edit">新增</el-button>
            </el-form-item>
        </el-form>
        <el-table
            :data="tableData"
            style="width: 100%;margin-bottom: 20px;"
            border
            v-loading="loading"
        >
            <el-table-column type="index" label="序号" align="center" width></el-table-column>
            <el-table-column prop="tagName" label="标签名称" width align="left"></el-table-column>
            <el-table-column prop="tagType" label="标签编码" width align="left"></el-table-column>
            <el-table-column prop="tagSort" label="排序号" width align="right"></el-table-column>
            <!-- <el-table-column align="center" prop="tagUrl" label="图标" width>
                <template slot-scope="scope">
                    <img
                        :src="scope.row.tagUrl"
                        v-if="scope.row.tagUrl != '' && scope.row.tagUrl != null"
                        width="70"
                        height="50"
                    />
                </template>
            </el-table-column>-->
            <el-table-column align="center" prop="picUrl" label="图片" width>
                <template slot-scope="scope">
                    <img
                        :src="scope.row.picUrl"
                        v-if="scope.row.picUrl != '' && scope.row.picUrl != null"
                        width="70"
                        height="50"
                    />
                </template>
            </el-table-column>
            <el-table-column prop="described" label="标签描述" width align="left" show-overflow-tooltip></el-table-column>
            <el-table-column label="操作" width="280" align="center">
                <template slot-scope="scope">
                    <el-button type="text" size="mini" @click="editInfo(scope.row)">修改</el-button>
                    <el-button
                        type="text"
                        size="mini"
                        @click="handledelete(scope.row)"
                    >删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-form :inline="true" :model="formInline">
            <el-form-item style="margin-top: 6px;"></el-form-item>
        </el-form>
        <div class="block" style="margin-top:-49px">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-sizes="[10, 20, 30, 50, 100, 150, 200]"
                :current-page="listQuery.current"
                :page-size="listQuery.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            ></el-pagination>
        </div>

        <el-dialog title="信息" :visible.sync="dialogVisible" width="50%">
            <el-form :model="dataForm" :rules="rules" ref="dataForm" label-width="120px">
                <el-form-item label prop="uuid" style="display:none"> <!--  -->
                    <el-input v-model="dataForm.uuid"></el-input>
                </el-form-item>
                <el-form-item label="标签名称" prop="tagName">
                    <el-input v-model="dataForm.tagName" placeholder="请输入名称" maxlength="20" show-word-limit clearable></el-input>
                </el-form-item>
                <el-form-item label="标签编码" prop="tagType">
                    <el-input v-model="dataForm.tagType" maxlength="20" placeholder="请输入编码" :disabled="disabledFlag" clearable></el-input>
                </el-form-item>
                <el-form-item label="排序号" prop="tagSort">
                    <el-input v-model="dataForm.tagSort" placeholder="请输入排序号"  maxlength="2" clearable></el-input>
                </el-form-item>
                <el-form-item label="标签描述" prop="described">
                    <el-input
                        v-model="dataForm.described"
                        type="textarea"
                        :autosize="{ minRows: 2, maxRows: 4}"
                        placeholder="请输入描述"
                        clearable
                    ></el-input>
                </el-form-item>
                <!-- <el-form-item label="标签图标(激活):" prop="imgListone">
                    <image-upload v-model="dataForm.imgListone" :size="'400x400'" :limit="1"></image-upload>
                </el-form-item>
                <el-form-item label="标签图标(未激活):" prop="imgListthree">
                    <image-upload v-model="dataForm.imgListthree" :size="'400x400'" :limit="1"></image-upload>
                </el-form-item>-->
                <el-form-item label="标签照片:" prop="imgListtwo">
                    <image-upload v-model="dataForm.imgListtwo" :size="'400x400'" :limit="1"></image-upload>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
                <el-button
                    type="primary"
                    @click="confirmEdit()"
                    size="mini"
                    :disabled="disabled"
                >确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog :visible.sync="dialogVisibleImg">
            <img width="100%" :src="dialogImageUrl" alt />
        </el-dialog>
    </div>
</template>

<script>
import launchTree from '@/components/launch_tree.vue'
import {
    queryGoodsTypeList,
    addGoodsType,
    deleteGoodsType,
    updaterole
} from "@/api/tagmanage";
import imageUpload from "@/page/common/Image-upload";
import qs from "qs";
let list = [
  {
    name: '一级目录', // 目录名字
    isOpen: true, // 是否初始展开目录
    hightLight: true, // 是否初始高亮
    className: undefined, // 添加自定义样式
    ...{}, // 其他用户额外参数
    childs: [ // 二级目录
      {
        name: '二级目录1',
        isOpen: false
      },
      {
        name: '二级目录2'
      },
      {
        name: '二级目录3'
      }
    ]
  },
  {
    name: '二级目录', // 目录名字
    isOpen: true, // 是否初始展开目录
    hightLight: true, // 是否初始高亮
    className: undefined, // 添加自定义样式
    ...{}, // 其他用户额外参数
    childs: [ // 二级目录
      {
        name: '二级目录1',
        isOpen: false
      },
      {
        name: '二级目录2'
      },
      {
        name: '二级目录3'
      }
    ]
  }
]

let options = {
  callback: undefined // 自定义点击事件，callback(node)
}
export default {
  components: {launchTree},
    data() {
        return {
          list: list,
      options: options,
          data: [{
          id: 1,
          label: '一级 1',
          children: [{
            id: 4,
            label: '二级 1-1',
            children: [{
              id: 9,
              label: '三级 1-1-1'
            }, {
              id: 10,
              label: '三级 1-1-2'
            }]
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        },
            tableData: [],
            loading: true,
            disabled: false,
            disabledFlag: false,
            dataForm: {
                uuid: "",
                tagName: "",
                tagType: "",
                described: "",
                tagSort: "",
                tagUrl: "",
                picUrl: "",
                status: "",
                imgListone: [],
                imgListtwo: [],
                imgListthree: []
            },
            total: 0,
            listQuery: {
                current: 1,
                size: 100
            },
            dialogVisible: false,
            dialogVisibleImg: false,
            dialogImageUrl: "",
            formInline: {
                user: "",
                region: ""
            },
            rules: {
                tagName: [
                    {
                        required: true,
                        message: "请输入名称",
                        trigger: "blur"
                    }
                ],tagType: [
                    {
                        required: true,
                        message: "请输入编码",
                        trigger: "blur"
                    }
                ],tagSort: [
                    {
                        required: true,
                        message: "请输入序号",
                        trigger: "blur"
                    }
                ],
                imgListone: [
                    { required: true, message: "请上传图标", trigger: "blur" }
                ],
                imgListtwo: [
                    { required: true, message: "请上传图片", trigger: "blur" }
                ],
                imgListthree: [
                    { required: true, message: "请上传图标", trigger: "blur" }
                ]
            }
        };
    },
    mounted() {
        this.getDataList();
    },
    components: {
        imageUpload,launchTree
    },
    created() {},
    methods: {
        confirmEdit() {
            this.$refs["dataForm"].validate(valid => {
                if (valid) {
                    this.disabled = true;
                    setTimeout(() => {
                        this.disabled = false;
                    }, 2000);
                    let data = {
                        uuid: this.dataForm.uuid,
                        tagName: this.dataForm.tagName,
                        tagType: this.dataForm.tagType,
                        described: this.dataForm.described,
                        tagSort: this.dataForm.tagSort,
                        // tagUrl: this.dataForm.imgListone[0],
                        picUrl: this.dataForm.imgListtwo[0],
                        // tagIcon: this.dataForm.imgListthree[0]
                    };
                    if (this.dataForm.uuid == "") {
                        addGoodsType(data).then(res => {
                            this.$message({
                                showClose: true,
                                message: res.message,
                                type: res.code == 1 ? "success" : "error"
                            });
                            this.dialogVisible = !this.dialogVisible;
                            this.getDataList();
                        });
                    } else {
                        updaterole(data).then(res => {
                            this.dialogVisible = !this.dialogVisible;
                            this.$message({
                                showClose: true,
                                message: res.message,
                                type: res.code == 1 ? "success" : "error"
                            });
                            this.getDataList();
                        });
                    }
                } else {
                    return false;
                }
            });
        },

        editInfo(v) {
            this.dialogVisible = !this.dialogVisible;
            this.disabledFlag = true;
            var userId = localStorage.getItem("userId");
            this.dataForm.imgListtwo = [v.picUrl];
            // this.dataForm.imgListone = [v.tagUrl];
            // this.dataForm.imgListthree = [v.tagIcon];
            this.dataForm.uuid = v.uuid;
            this.dataForm.tagName = v.tagName;
            this.dataForm.tagType = v.tagType;
            this.dataForm.described = v.described;
            this.dataForm.tagSort = v.tagSort;
        },
        kong() {
            this.formInline.user = "";
            this.formInline.region = "";
        },
        search() {
            this.loading = true;
            this.listQuery.current = 1;
            let data = {
                size: this.listQuery.size,
                current: this.listQuery.current,
                condition: {
                    tagName: this.formInline.user
                }
            };
            queryGoodsTypeList(data).then(res => {
                this.loading = false;
                this.total = res.total;
                this.tableData = res.records;
            });
        },
        handledelete(v) {
            let data = {
                uuid: v.uuid
            };
            this.$confirm("确认删除吗？").then(_ => {
                deleteGoodsType(data).then(res => {
                    this.$message({
                        showClose: true,
                        message: res.message,
                        type: res.code == 1 ? "success" : "error"
                    });
                    this.getDataList();
                });
            });
        },
        add(v) {
            this.dataForm.uuid = "";
            this.disabledFlag = false;
            this.dialogVisible = !this.dialogVisible;
            this.$nextTick(() => {
                this.$refs["dataForm"].resetFields();
                this.dataForm.imgListtwo = [];
                this.dataForm.uuid = "";
                // this.dataForm.imgListone = [];
                // this.dataForm.imgListthree = [];
                this.dataForm.tagName = "";
                this.dataForm.tagType = "";
                this.dataForm.described = "";
                this.dataForm.tagSort = "";
            });
        },
        handleSizeChange(val) {
            this.listQuery.size = val;
            this.getDataList();
        },
        handleCurrentChange(val) {
            this.listQuery.current = val;
            this.getDataList();
        },

        getDataList() {
            let data = {
                size: this.listQuery.size,
                current: this.listQuery.current,
                condition: {
                    status: "1",
                    tagName: this.formInline.user
                }
            };
            queryGoodsTypeList(data).then(res => {
                this.loading = false;
                this.total = res.total;
                this.tableData = res.records;
            });
        }
    }
};
</script>
<style lang="less" scoped>
.el-form-item .el-select {
    width: 100%;
}
</style>
